import ajax from "./module/ajax.js";
import { debounce } from './module/tools.js';

let form = document.querySelector("#form");
let getCode = document.querySelector('#getCode');
let myReserve = document.querySelector('#myReserve');
let startReserve = document.querySelector('#startReserve');

//  用户数据
const userData = {};

//  表单验证
const checkData = {
    name(v) {
        return /^[a-z]+$/i.test(v);
    },
    phone(v) {
        return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(v);
    },
    idCard(v) {
        return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(v);
    }
};

// 表单验证结果
const checkRes = {
    name: false,
    phone: false,
    idCard: false
};

// 姓名验证
form.name.addEventListener(
    'keyup',
    debounce(function () {
        let res = checkData.name(this.value);
        checkRes.name = res;
        //提示用户
        this.nextElementSibling.innerHTML = res ? "姓名有效" : "您输入的姓名有误";
        this.nextElementSibling.style.color = res ? "green" : "red";

    }, 500)
);

// 手机号验证
form.phone.addEventListener(
    'keyup',
    debounce(function () {
        let res = checkData.phone(this.value);
        checkRes.phone = res;
        //提示用户
        this.nextElementSibling.innerHTML = res ? "手机号码有效" : "您输入的手机号码有误";
        this.nextElementSibling.style.color = res ? "green" : "red";

    }, 500)
);

//  身份证号验证
form.idCard.addEventListener(
    'keyup',
    debounce(function () {
        let res = checkData.idCard(this.value);
        checkRes.idCard = res;
        //提示用户
        this.nextElementSibling.innerText = res ? "身份证有效" : "您输入的身份证有误";
        this.nextElementSibling.style.color = res ? "green" : "red";

    }, 500)
);

// 获取验证码
getCode.addEventListener('click', async function () {
    if (!form.phone.value || !checkRes.phone) {
        getCode.nextElementSibling.innerText = "手机号码有误";
        getCode.nextElementSibling.style.color = "red";
        return;
    }
    getCode.nextElementSibling.innerText = "";
    getCode.nextElementSibling.style.color = "red";
    try {
        let res = await ajax({
            url: 'http://egg.flower.dbice.cn/api/sms',
            data: {
                phone: form.phone.value
            }
        });
        form.code.value = res.data.code;
    } catch (error) {
        console.log(error);
    }
})

// 预约请求
startReserve.addEventListener('click', async function () {
    //  进行表单验证，如果有错误的信息，则直接返回
    for (let k in checkRes) {
        if (!checkRes[k]) {
            return console.log("您输入的信息有误");
        }
    }
    try {
        let reserveRes = await ajax({
            url: 'http://egg.flower.dbice.cn/api/register',
            method: "POST",
            data: {
                name: form.name.value,
                phone: form.phone.value,
                idCard: form.idCard.value,
                code: form.code.value
            }
        });
        console.log(reserveRes);
    } catch (error) {
        if (error.code !== 409) {
            return console.log(error);
        }
    }

    // 登录
    try {
        let loginRes = await ajax({
            url: 'http://egg.flower.dbice.cn/api/login',
            method: "POST",
            data: {
                name: form.name.value,
                phone: form.phone.value,
                idCard: form.idCard.value
            }
        });
        // 将登录信息存入到localStorage中
        localStorage.setItem('userData', JSON.stringify(loginRes.data));
        // 登录成功载入预约详情页
        location.href = "./reserve.html";
    } catch (error) {
        console.log(error);
    }
})
